import React, {Component} from 'react';
import PropTypes from 'prop-types'

class StoryList extends Component {
    static propsTypes = {
        bookList: PropTypes.Array
    }
    static defaultProps = {
        bookList:[]
    }
    render() {
        return (
            <div>
                {/*方案一：返回一个函数*/}
                {/*{*/}
                {/*    this.props.render()*/}
                {/*}*/}
                {/*{*/}
                {/*    this.props.bookList.map(book=>(*/}
                {/*        <div key={book.id}>*/}
                {/*            <img src={book.bookImg}/>*/}
                {/*            <p>{book.bookName}</p>*/}
                {/*        </div>*/}
                {/*    ))*/}
                {/*}*/}

                {/*方案二：通过组件标签内传值*/}
                {
                    this.props.children
                }
                {
                    this.props.bookList.map(book=>(
                        <div key={book.id}>
                            <img src={book.bookImg}/>
                            <p>{book.bookName}</p>
                        </div>
                    ))
                }
            </div>
        );
    }
}

export default StoryList;